<template>
  <el-container class="home-container">
    <!-- 顶栏 -->
    <el-header>
      <div class="title">
        <img src="~assets/img/home/logo.png" alt="" class="header-logo" @click="hrefHome" style="cursor:pointer" />
        <div class="title-text">中肽悦享管理系统 v1.2.2</div>
      </div>
      <div class="method-box">
        <div class="service-btn" @click="telTip"><i class="el-icon-phone"></i>在线客服</div>
        <div class="date">
          <span class="el-icon-alarm-clock"></span>
          {{ today }}
        </div>
        <div class="date">
          <span class="el-icon-s-custom"></span>
          {{ manager_name }}
        </div>
        <div class="msgBox" @click="getNotice" v-if="roleId == 1 || roleId == 199">
          <i class="el-icon-bell"></i>
          <div class="bellIcon" v-if="noticeNum != 0">{{ noticeNum }}</div>
        </div>
        <el-button type="info" size="mini" @click="logout">退出登录</el-button>
      </div>
    </el-header>
    <el-container>
      <!-- 侧栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'" class="my-aside">
        <div class="toogle-btn">
          <el-switch v-model="switchStatus" style="left: 4px;" active-color="#409eff" inactive-color="#969696"
            @change="toogleMenu">
          </el-switch>
          <div class="aside-tip" v-show="switchStatus">展开/收起</div>
        </div>
        <el-menu :unique-opened="true" :collapse="isCollapse" :collapse-transition="false" :router="true"
          background-color="#343c45" text-color="#FFF" active-text-color="#FFFFFF" :default-active="activePath">
          <!-- 一级菜单 -->
          <el-submenu :index="item.auth_id + ''" v-for="item in parentMenus" :key="item.auth_id">
            <template slot="title">
              <i :class="item.menu_icon"></i>
              <span>{{ item.menu_name }}</span>
              <span class="tag-item" v-if="item.menu_name == '系统设置' && num > 0"></span>
            </template>
            <!-- 二级菜单 -->
            <template v-for="(subItem, index) in item.childMenus">
              <el-menu-item :index="'/' + subItem.menu_url" @click="jamp('/' + subItem.menu_url)">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>{{ subItem.menu_name }}</span>
                  <span class="tag-item" v-if="subItem.menu_name == '反馈管理' && num > 0"></span>
                </template>
              </el-menu-item>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>

  </el-container>
</template>

<script>
import {
  getMenus, listNotice, readNotice
} from "../network/menu";
export default {
  data() {
    return {
      parentMenus: [
        {
          auth_id: 1,
          menu_icon: "el-icon-s-shop",
          menu_name: "商户管理",
          childMenus: [
            {
              auth_id: 10,
              menu_name: "轮播与广告",
              menu_url: "mainPic",
            },
          ]
        },
        {
          auth_id: 999,
          menu_icon: "el-icon-user-solid",
          menu_name: "用户管理",
          childMenus: [
            {
              auth_id: 19999,
              menu_name: "用户列表",
              menu_url: "userList",
            },
          ]
        },
        // {
        //   auth_id: 24,
        //   menu_icon: "el-icon-s-platform",
        //   menu_name: "内容管理",
        //   childMenus: [
        //     {
        //       auth_id: 37,
        //       menu_name: "文章/视频列表",
        //       menu_url: "contentList",
        //     },

        //     {
        //       auth_id: 27,
        //       menu_name: "文章/视频评论",
        //       menu_url: "articleResponse",
        //     },
        //     {
        //       auth_id: 316,
        //       menu_name: "内容标签列表",
        //       menu_url: "contentTagList",
        //     },
        //   ]
        // },
        {
          auth_id: 3,
          menu_icon: "el-icon-s-claim",
          menu_name: "订单管理",
          childMenus: [
            {
              auth_id: 12,
              menu_name: "电商系统订单列表",
              menu_url: "orders",
            },

          ],
        },
        {
          auth_id: 2,
          menu_icon: "el-icon-s-goods",
          menu_name: "商品管理",
          childMenus: [
            {
              auth_id: 10000,
              menu_name: "添加商品",
              menu_url: "addProduct",
            },
            {
              auth_id: 78,
              menu_name: "商品管理",
              menu_url: "zhuanquList",
            },
            {
              auth_id: 30,
              menu_name: "商品分类",
              menu_url: "categroyList",
            },
            {
              auth_id: 186,
              menu_name: "专区管理",
              menu_url: "specials",
            },
            {
              auth_id: 34,
              menu_name: "商品评论",
              menu_url: "productComment",
            },
            {
              auth_id: 35,
              menu_name: "商品问答",
              menu_url: "answerList",
            },

          ]
        },
        // {
        //   auth_id: 290,
        //   menu_icon: "el-icon-s-promotion",
        //   menu_name: "活动设置",
        //   childMenus: [
        //     {
        //       auth_id: 48,
        //       menu_name: "活动设置",
        //       menu_url: "rechargeRule",
        //     },
        //     {
        //       auth_id: 302,
        //       menu_name: "海报设置",
        //       menu_url: "shareActiveRule",
        //     },
        //     {
        //       auth_id: 303,
        //       menu_name: "参与活动用户列表",
        //       menu_url: "activeDistributionMember",
        //     },
        //   ],
        // },
        {
          auth_id: 41,
          menu_icon: "el-icon-s-tools",
          menu_name: "系统设置",
          childMenus: [
            {
              auth_id: 999,
              menu_name: "路径管理",
              menu_url: "urlList",
            },
            {
              auth_id: 10000,
              menu_name: "基本设置",
              menu_url: "rebate",
            },
            {
              auth_id: 10001,
              menu_name: "公告列表",
              menu_url: "noticeList",
            },

          ],
        }
      ],

      isCollapse: false,
      //选中路径
      activePath: "",
      //侧滑菜单切换
      switchStatus: true,
      today: "",
      user_id: '',
      num: 0,
      manager_name: sessionStorage.manager_name,
      drawer: false,
      noticeList: [],
      title: '消息提醒',
      // shopId: sessionStorage.shop_id
      shopId: 0,
      noticeNum: 0,
      roleId: sessionStorage.roleId
    };
  },
  methods: {
    getMenus() {
      getMenus({
        manager_id: 1,
      })
        .then(res => {
          console.log(res);
          console.log(1111);
          if (res.flag) {
            this.parentMenus = res.data.parentMenus;
            this.childMenus = res.data.childMenus;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //切换侧边栏菜单
    toogleMenu() {
      this.isCollapse = !this.isCollapse;
      localStorage.setItem('isCollapse', this.isCollapse);
    },
    jamp(activePath) {
      this.activePath = activePath;
      window.sessionStorage.setItem("activePath", activePath);
    },
    //后台时间展示
    getTime() {
      let today = new Date();
      let month =
        (today.getMonth() + 1 + "").length == 2 ?
          today.getMonth() + 1 :
          "0" + (today.getMonth() + 1);
      let date =
        (today.getDate() + "").length == 2 ?
          today.getDate() :
          "0" + today.getDate();
      this.today = today.getFullYear() + "年" + month + "月" + date + "日";
    },
    logout() {
      this.$confirm('此操作将退出账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.sessionStorage.clear();
        this.$message({
          type: 'success',
          message: '已退出!'
        });
        this.$router.replace({
          path: '/login'
        });
      }).catch(() => { });
    },
    //客服提示弹窗
    telTip() {
      this.$alert(
        "人工客服：0431-81883497<br>周一至周五：(09:00-17:00)",
        "系统消息", {
        confirmButtonText: "确定",
        dangerouslyUseHTMLString: true
      }
      );
    },
    hrefHome() {
      this.$router.push({
        path: '/homePage'
      })
    },

    // 已读消息提醒
    checkHandle(obj, index) {
      console.log(obj);
      console.log(obj.name);
      this.readNotice(obj)
      this.handleClose()
    },

    // 已读消息
    readNotice(obj) {
      readNotice({
        noticeName: obj.name
      }).then(res => {
        this.noticeNum = this.noticeNum - 1
        this.$router.push(obj.path)
        window.sessionStorage.setItem("activePath", obj.path);
      })
    },

    // 获取消息提醒
    getNotice() {
      listNotice({ shopId: 0 }).then(res => {
        if (res.flag) {
          console.log(res.data);
          var obj = res.data, list = [];
          for (var i in obj) {
            if (obj[i] != null) {
              var o = {}
              o.num = Math.abs(obj[i])
              o.name = i
              switch (i) {
                case 'notice_goods':
                  o.text = `有${o.num}个商品待审核`
                  o.path = 'productExam'
                  break;
                case 'notice_shop':
                  o.text = `有${o.num}个门店待审核`
                  o.path = 'ShopList'
                  break;
                case 'notice_topic':
                  o.text = `有${o.num}个文章待审核`
                  o.path = 'examineContent'
                  break;
                case 'notice_video':
                  o.text = `有${o.num}个视频待审核`
                  o.path = 'healthVideoAudit'
                  break;
                case 'notice_jiankangguwen':
                  o.text = `有${o.num}个健康顾问信息待查看`
                  o.path = 'vipDoctor'
                  break;
                case 'notice_kefuzhongxin':
                  o.text = `有${o.num}个客服中心信息待查看`
                  o.path = 'report'
                  break;
                default:
                  break;
              }
              list.push(o)
              console.log(o);
            }
          }
          this.noticeList = list
          this.noticeNum = list.length
          if (list.length == 0) {
            this.$message.success('暂无未读消息')
          }
          console.log(list);
          this.drawer = true

        } else {
          this.$message.warning('获取失败，请稍后再试')
        }
      })
    },
    handleClose() {
      this.drawer = false
    },
  },
  created: function () {
    let user_id = window.sessionStorage.getItem('user_id')
    let isCollapse = localStorage.getItem('isCollapse');
    if (isCollapse == 'true') {
      isCollapse = true;
    } else {
      isCollapse = false;
    }
    this.isCollapse = isCollapse;
    this.switchStatus = !isCollapse;
    this.user_id = user_id
    // this.getMenus();
    this.activePath = window.sessionStorage.getItem("activePath");
    this.getTime();
    if (sessionStorage.roleId == 1 || sessionStorage.roleId == 199) {
      this.getNotice()
    }

    sessionStorage.shop_id = 0
    sessionStorage.manager_name = '中肽悦享'

    console.log(1);

  }
};
</script>

<style scoped>
.tag-item {
  width: 8px;
  height: 8px;
  background-color: #f56c6c;
  border-radius: 50%;
  font-size: 12px;
  position: absolute;
  top: 13px;
}

.home-container {
  height: 100%;
}

.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #252e37;
}

.el-main {
  background-color: #f2f2f2;
}



.header-logo {
  display: block;
  height: 28px;
  margin-right: 12px;
}

.title {
  display: flex;
  align-items: flex-end;
  font-size: 15px;
  color: #ffffff;
}

.title-text {
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 3px;
}

.method-box {
  display: flex;
  align-items: center;
}

.date {
  font-size: 15px;
  color: #ffffff;
  margin-right: 12px;
}

.el-aside .el-menu {
  border-right: none;
}

.toogle-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  font-size: 14px;
  color: #fff;
}

.aside-tip {
  margin-left: 8px;
}

.my-aside {
  background: #343c45;
  overflow-y: scroll !important;
  height: calc(100vh - 60px);
}

::-webkit-scrollbar {
  display: none;
}

.el-submenu .el-menu-item {
  background-color: rgb(84, 95, 107) !important;
}

.el-submenu.is-active .el-menu-item.is-active {
  position: relative;
  background: #FFF !important;
  color: #333 !important;
}

.service-btn {
  font-size: 14px;
  color: #FFF;
  opacity: 0.8;
  margin-right: 12px;
  cursor: pointer;
  transition: all .4s;
}

.service-btn:hover {
  color: #409EFF;
}

.el-submenu__title>span {
  font-size: 15px;
  font-weight: bold;
}

.msgBox {
  position: relative;
  margin-right: 20px;

}

.bellIcon {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  background-color: red;
  border-radius: 50%;
  color: #FFF;
  font-size: 12px;
}

.msgBox>i {
  color: #fff;
}

.msgList {
  width: 100%;
  height: 87vh;
  overflow: scroll;
}

.msgItem {
  box-sizing: border-box;
  position: relative;
  padding: 20px 20px;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #f2f2f2;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.msgTip {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
}

.el-drawer__header {
  border: none !important;
}

.emptyBox {
  margin-top: 200px;
  width: 100%;
  font-size: 14px;
  color: #333;
  text-align: center;
}
</style>
